<template>
  <el-drawer
    :visible.sync="drawerVisible"
    direction="rtl"
    :append-to-body="true"
    :before-close="handleClose"
    size="50%"
  >
    <div class="read-file-title" slot="title">
      <span>{{ drawerTitle }}</span>
      <span>路径：{{ folderPath }}</span>
      <span>文件：{{ fileName }}</span>
      <span>
        <el-button type="primary" @click="saveEditorFile">
          <div slot="default">
            <svg-icon icon-class="save" size="1.4"></svg-icon>
          </div>
          <div>保存</div>
        </el-button>
      </span>
    </div>
    <div class="file-editor">
      <Editor
        ref="fileEditor"
        :customeStyle="{ height: 'calc(100vh - 200px)' }"
        :editorContent="fileContent"
      />
    </div>
  </el-drawer>
</template>
<script>
import Editor from "@/components/Editor/index.vue";

import { readFile, writeFile } from "@/api/linux/file";

export default {
  name: "ReadFile",
  components: {
    Editor,
  },
  props: {
    folderPath: {
      type: String,
      default: () => "",
    },
    fileName: {
      type: String,
      default: () => "",
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
      default: () => "",
    },
  },
  computed: {
    drawerVisible: {
      get() {
        return this.visible;
      },
    },
    drawerTitle: {
      get() {
        return this.title;
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (!val) return;
        this.loadFileContent();
      },
    },
  },
  data() {
    return {
      fileContent: null,
    };
  },
  methods: {
    // 加载文件内容
    async loadFileContent() {
      const { data } = await readFile({
        filePath: this.folderPath,
        fileName: this.fileName,
      });
      this.fileContent = data;
    },

    // 保存文件内容
    async saveEditorFile() {
      this.$confirm("确定保存编辑之后的信息吗？", "保存", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let content = this.$refs.fileEditor.getContent();
          if (content === "\n") content = "";
          const data = {
            filePath: this.folderPath,
            fileName: this.fileName,
            content: content,
          };
          await writeFile(data);
          this.loadFileContent();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

    // 关闭
    handleClose() {
      this.fileContent = null;
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.read-file-title {
  font-weight: bold;

  span:nth-child(2) {
    margin-left: 10%;
    color: #409eff;
  }

  span:nth-child(3) {
    margin-left: 20px;
    color: #f56c6c;
  }

  span:nth-child(4) {
    margin-left: 20px;

    .el-button {
      span > div {
        float: left;
      }

      span > div:nth-child(2) {
        line-height: 20px;
        font-size: 15px;
        margin-left: 5px;
      }
    }
  }
}

.file-editor {
  margin-left: 5%;
  width: 90%;
}
</style>
